<template>
	<view class="search">
		<u-navbar>
			<view class="slot-wrap u-flex-1">
				<u-search
					placeholder="输入商品名或粘贴京东商品标题搜索"
					v-model="search"
					:show-action="true"
					border-color="#FF4D4F"
					:height="54"
					bg-color="#ffffff"
					style="width: 100%;"
					:animation="true"
					@search="dosearch(search, 1)"
					@custom="dosearch(search, 1)"
				></u-search>
			</view>
		</u-navbar>
		<view class="" v-if="search === ''">
			<view class="header">
				<view class="step">
					<view class="top">省钱技巧:京东领券后再来京推优选购买可享受用券和返利双重优惠</view>
					<view class="center u-flex u-row-around u-col-center">
						<view class="stepicon">1</view>
						<u-icon name="arrow-rightward" color="#84300B" :size="48"></u-icon>
						<view class="stepicon">2</view>
						<u-icon name="arrow-rightward" color="#84300B" :size="48"></u-icon>
						<view class="stepicon">3</view>
						<u-icon name="arrow-rightward" color="#84300B" :size="48"></u-icon>
						<view class="stepicon">4</view>
					</view>
					<view class="bot u-flex u-row-between u-col-center">
						<text>打开京东APP</text>
						<text>复制商品标题</text>
						<text>打开京推优选</text>
						<text>粘贴搜索</text>
					</view>
				</view>
				<view class="history" v-if="historyList.length > 0">
					<view class="u-flex u-row-between u-col-center">
						<text class="title" style="margin-bottom: 14rpx;">搜索历史</text>
						<u-icon name="trash" color="#BFBFBF" size="30" @click="doRomove"></u-icon>
					</view>
					<view class="">
						<view class="historyul u-flex u-row-between u-col-center u-flex-wrap">
							<view class="historyli" v-for="(v, k) in historyList" :key="k" @tap="dosearch(v)">{{ v }}</view>
							<view style="width: 122rpx;height: 0;margin-bottom: 20rpx;" v-for="(v, k) in (historyList.length % 5) + 1" :key="$u.guid(9)"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="goodsul">
				<view class="title" style="margin-top: 20rpx;">今日必抢</view>
				<view class="">
					<view class="order">
						<view class="item" v-for="(item, index) in goodsList" :key="index" @click="goNext(2, item)">
							<view class="left"><image :src="item.imageInfo.imageList[0].url" mode="aspectFill"></image></view>
							<view class="content">
								<view class="title u-line-2">
									<text class="cos" v-if="item.owner === 'g'">JD</text>
									{{ item.skuName }}
								</view>
								<view class="type u-line-1 gray u-flex u-row-between u-col-center">
									<view class="">
										京东价
										<text>￥{{ item.priceInfo.price }}</text>
									</view>
									<view class="">
										<text class="black">{{ item.comments | numberFormat }}</text>
										条评论 好评率
										<text class="black">{{ item.goodCommentsShare }}%</text>
									</view>
								</view>
								<view class="earn u-flex u-row-between u-col-center">
									<view class="coupon" v-if="item.couponInfo.couponList.length > 0">优惠券 ￥{{ item.couponInfo.couponList[0].discount }}</view>
									<view class="coupon" style="width: 230rpx;" v-if="islogin">购买返赚 ￥{{ item.commissionInfo.couponCommission.toFixed(2) }}</view>
								</view>
								<view class="bot u-flex u-row-between u-col-center">
									<view class="price">
										券后价：￥
										<text class="bold">{{ item.priceInfo.lowestCouponPrice }}</text>
									</view>
									<view
										class=""
										style="white-space:nowrap;height: 50rpx;line-height: 50rpx; border-radius: 40rpx;background-color: #fa3534;color: #FFFFFF;padding:0 20rpx;"
									>
										分享赚￥{{ item.commissionInfo.share_commission.toFixed(2) }}
									</view>
									<!-- <u-button type="error" shape="circle" size="mini">马上抢</u-button> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="screen" v-else>
			<u-sticky bg-color="transparent" :offset-top="navtop">
				<view class="headers">
					<view class="u-flex u-row-between u-col-center" style="position: relative;height: 72rpx;">
						<view class="u-flex u-row-between u-col-top u-flex-1" style="padding: 0 30rpx; z-index: 999;">
							<!-- 	<view class="tabsline u-flex u-row-center u-col-center" @click="tabschange(k + 1)" v-for="(v, k) in tabList" :key="k">
								<view class="title" :style="{ color: v.active ? '#FF4D4F' : '#777777' }">{{ v.title }}</view>
								<view class="icons" v-if="k !== 0">
									<u-icon name="arrow-up-fill" :color="v.sort === 'desc' ? '#777777' : '#2979ff'" :size="20"></u-icon>
									<u-icon name="arrow-down-fill" :color="v.sort === 'desc' ? '#2979ff' : '#777777'" :size="20"></u-icon>
								</view>
							</view> -->
							<view class="tabsline u-flex u-row-center u-col-center" @click="tabschange(k + 1)" v-for="(v, k) in tabList" :key="k">
								<view class="title" :style="{ color: v.active ? '#404040' : '#777777', lineHeight: '20rpx', height: '20rpx' }">
									<view class="">{{ v.title }}</view>
									<image v-if="v.active" src="../../../static/imgs/screenact.png" mode="" style="width: 28rpx;height: 14rpx;"></image>
								</view>
								<!-- 		<view class="icons" v-if="k !== 0">
									<image src="../../../static/imgs/top.png" mode="" class="icon" v-if="v.sort !== 'desc'"></image>
									<image
										src="../../../static/imgs/top.png"
										mode=""
										class="icon"
										:style="{ transform: 'rotate(180deg)', marginTop: v.sort == 'desc' ? '0' : '-14rpx' }"
										v-if="v.sort !== 'asc'"
									></image>
								</view> -->
								<view class="icons" v-if="k !== 0">
									<view class="iconfont  icon-arrows icon" v-if="v.sort !== 'desc'" style="color: #919191;font-size: 24rpx;margin-bottom: -10rpx;"></view>
									<view
										class="iconfont  icon-arrows icon"
										v-if="v.sort !== 'asc'"
										:style="{ color: '#919191', fontSize: '24rpx', transform: 'rotate(180deg)', marginTop: v.sort == 'desc' ? '0' : '-10rpx' }"
									></view>
								</view>
							</view>
						</view>
						<view class="tabslines  u-flex u-row-center u-col-center">
							<view class="u-flex u-row-center u-col-center">
								<view class="title">筛选</view>
								<view class="icons"><text class="iconfont icon-screen" style="font-size: 20rpx;"></text></view>
							</view>
							<u-dropdown ref="uDropdown" :menu-icon-size="0" class="screendro" @open="open" @close="close">
								<u-dropdown-item v-model="value1" title="   " :options="options1" @change="change"></u-dropdown-item>
							</u-dropdown>
						</view>
					</view>
					<view class="u-flex u-row-between u-col-center" style="padding: 10rpx 24rpx;">
						<text>仅展示优惠券商品</text>
						<u-switch v-model="checked" :size="34" @change="switchchange"></u-switch>
					</view>
				</view>
			</u-sticky>
			<view class="goodsul">
				<view class="order">
					<view class="item" v-for="(item, index) in jdGoodsList" :key="index" @click="goNext(2, item)">
						<view class="left"><image :src="item.imageInfo.imageList[0].url" mode="aspectFill"></image></view>
						<view class="content">
							<view class="title u-line-2">
								<text class="cos" v-if="item.owner === 'g'">JD</text>
								{{ item.skuName }}
							</view>
							<view class="type u-line-1 gray u-flex u-row-between u-col-center">
								<view class="">
									京东价
									<text>￥{{ item.priceInfo.price }}</text>
								</view>
								<view class="">
									<text class="black">{{ item.comments | numberFormat }}</text>
									条评论 好评率
									<text class="black">{{ item.goodCommentsShare }}%</text>
								</view>
							</view>
							<view class="earn u-flex u-row-between u-col-center">
								<view class="coupon" v-if="item.couponInfo.couponList.length > 0">优惠券 ￥{{ item.couponInfo.couponList[0].discount }}</view>
								<view class="coupon" style="width: 230rpx;" v-if="islogin">购买返赚 ￥{{ item.commissionInfo.couponCommission.toFixed(2) }}</view>
							</view>
							<view class="bot u-flex u-row-between u-col-center">
								<view class="price">
									券后价：￥
									<text class="bold">{{ item.priceInfo.lowestCouponPrice }}</text>
								</view>
								<view
									class=""
									style="white-space:nowrap;height: 50rpx;line-height: 50rpx; border-radius: 40rpx;background-color: #fa3534;color: #FFFFFF;padding:0 20rpx;"
								>
									分享赚￥{{ item.commissionInfo.share_commission.toFixed(2) }}
								</view>
								<!-- <u-button type="error" shape="circle" size="mini">马上抢</u-button> -->
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</view>
		</view>
		<u-modal v-model="isshow" content="您还未登录,登录后方可正常使用" :show-cancel-button="true" confirm-text="去登陆" confirm-color="#E76E4D" @confirm="goNext(1)"></u-modal>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script>
export default {
	name: 'search',
	data() {
		return {
			scrollTop: 0,
			isshow: false,
			islogin: false,
			status: 'loadmore',
			tabList: [
				{
					title: '综合',
					sort: '',
					active: true
				},
				{
					title: '销量',
					sort: '',
					active: false
				},
				{
					title: '价格',
					sort: '',
					active: false
				},
				{
					title: '佣金比',
					sort: '',
					active: false
				}
			],
			isdesc: true,
			num: 1,
			JDpage: 1,
			owner: '',
			sortName: '',
			sort: 'desc',
			isCoupon: '',
			value1: 0,
			navtop: (this.capsuleHeight + this.barHeight) * 2,
			checked: false,
			search: '',
			options1: [
				{
					label: '全部商品',
					value: 0
				},
				{
					label: '京东自营',
					value: 1
				},
				{
					label: '京东拼团',
					value: 2
				}
			],
			goodsList: [
				// {
				// 	brandCode: '27776',
				// 	brandName: '三只松鼠（Three Squirrels）',
				// 	categoryInfo: {
				// 		cid1: 1320,
				// 		cid1Name: '食品饮料',
				// 		cid2: 1583,
				// 		cid2Name: '休闲食品',
				// 		cid3: 1591,
				// 		cid3Name: '坚果炒货'
				// 	},
				// 	comments: 310681,
				// 	commissionInfo: {
				// 		commission: 13.95,
				// 		commissionShare: 15,
				// 		couponCommission: 7.35,
				// 		endTime: 1612108799000,
				// 		isLock: 0,
				// 		plusCommissionShare: 15,
				// 		startTime: 1606147200000
				// 	},
				// 	couponInfo: {
				// 		couponList: [
				// 			{
				// 				bindType: 1,
				// 				discount: 44,
				// 				getEndTime: 1610294399000,
				// 				getStartTime: 1608912000000,
				// 				hotValue: 2,
				// 				isBest: 1,
				// 				link:
				// 					'https://coupon.m.jd.com/coupons/show.action?linkKey=AAROH_xIpeffAs_-naABEFoePEGic4DrY8VI98PfvSMOlIP4lc-rNzQshHM9M5Fy80wqo3R-LQLD71GmJt6fZEI5s95TPg',
				// 				platformType: 0,
				// 				quota: 90,
				// 				useEndTime: 1610294399000,
				// 				useStartTime: 1608912000000
				// 			}
				// 		]
				// 	},
				// 	deliveryType: 1,
				// 	forbidTypes: [0],
				// 	goodCommentsShare: 96,
				// 	imageInfo: {
				// 		imageList: [
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/145529/8/19985/175283/5fe59269Ebc0113d9/c58c66ad0817dd1f.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/155012/17/11429/149876/5fe59268E798151a8/992a7d28f7d3931e.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/144595/3/20174/106513/5fe59268E1de6fb20/df8b76682968782a.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/155323/16/11396/86067/5fe59269Ec849b287/8d9f6bb95984423b.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/153072/20/11523/139647/5fe59269E15833814/f0f0ce9f3f47c44c.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/143075/12/19926/132105/5fe59269E101a6fdc/c948d2638ca3a7cf.jpg' },
				// 			{ url: 'https://img14.360buyimg.com/pop/jfs/t1/156740/38/1974/146727/5fe59269Ebf75ce3a/b6adbb0114b91e48.jpg' }
				// 		],
				// 		whiteImage: 'https://img14.360buyimg.com/pop/jfs/t1/146185/24/20021/738697/5fe59297Ea920a957/4226c09dd878e4a7.png'
				// 	},
				// 	inOrderCount30Days: 17417,
				// 	inOrderCount30DaysSku: 17417,
				// 	isHot: 1,
				// 	materialUrl: 'item.jd.com/100010595494.html',
				// 	owner: 'g',
				// 	pinGouInfo: [],
				// 	priceInfo: { lowestCouponPrice: 49, lowestPrice: 93, lowestPriceType: 1, price: 93 },
				// 	resourceInfo: { eliteId: 31, eliteName: '今日必推' },
				// 	shopInfo: { shopId: 1000015268, shopLabel: '0', shopLevel: 4.9, shopName: '三只松鼠京东自营旗舰店' },
				// 	skuId: 100010595494,
				// 	skuName: '三只松鼠_ _坚果大礼包1515g',
				// 	spuid: 100010595494
				// }
			],
			historyList: [],
			jdGoodsList: [],
			flag: true
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		if (option.problem) {
			this.search = option.problem;
			this.dosearch();
		} else {
			this.getJdGoods();
		}
	},
	//挂载开始之前被调用
	beforeMount() {},
	onReachBottom() {
		this.status = 'loading';
		this.JDpage = ++this.JDpage;
		this.dosearch();
	},
	onPageScroll(obj) {
		// console.log(obj);
		this.scrollTop = obj.scrollTop;
	},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {
		this.islogin = uni.getStorageSync('token') ? true : false;
		if (this.flag) {
			if (uni.getStorageSync('jxuser').id) {
				this.getJdGoods();
				this.jdGoodsList = [];
				this.dosearch();
				this.flag = false;
			}
		}
	},
	//前台进入后台
	onHide() {},
	methods: {
		//保存关键字到历史记录
		saveKeyword(keyword) {
			uni.getStorage({
				key: 'OldKeys',
				success: res => {
					var OldKeys = JSON.parse(res.data);
					var findIndex = OldKeys.indexOf(keyword);
					if (findIndex == -1) {
						OldKeys.unshift(keyword);
					} else {
						OldKeys.splice(findIndex, 1);
						OldKeys.unshift(keyword);
					}
					//最多10个纪录
					OldKeys.length > 10 && OldKeys.pop();
					uni.setStorage({
						key: 'OldKeys',
						data: JSON.stringify(OldKeys)
					});
					this.historyList = OldKeys; //更新历史搜索
				},
				fail: e => {
					var OldKeys = [keyword];
					uni.setStorage({
						key: 'OldKeys',
						data: JSON.stringify(OldKeys)
					});
					this.historyList = OldKeys; //更新历史搜索
				}
			});
		},
		doRomove() {
			this.historyList = [];
			uni.removeStorage({
				key: 'OldKeys'
			});
		},
		//加载历史搜索,自动读取本地Storage
		loadOldKeyword() {
			uni.getStorage({
				key: 'OldKeys',
				success: res => {
					var OldKeys = JSON.parse(res.data);
					this.historyList = OldKeys;
				}
			});
		},
		goNext(val, item) {
			switch (val) {
				case 1:
					uni.switchTab({
						url: '/pages/my/index'
					});
					break;
				case 2:
					console.log(val, item);
					if (this.islogin) {
						uni.navigateTo({
							url: '/pages/other/goodsInfo/goodsInfo?item=' + encodeURIComponent(JSON.stringify(item)),
							animationType: 'pop-in',
							animationDuration: 300
						});
					} else {
						this.isshow = true;
					}
					break;
			}
		},
		switchchange(value) {
			console.log(value);
			if (value === true) {
				this.isCoupon = 1;
			} else {
				this.isCoupon = 0;
			}
			this.jdGoodsList = [];
			this.dosearch();
		},
		tabschange(val) {
			console.log(val);
			for (var i = 0; i < this.tabList.length; i++) {
				if (i === val - 1) {
					this.tabList[i].active = true;
				} else {
					this.tabList[i].active = false;
				}
			}
			console.log('this.num', this.num, 'val', val);
			if (this.num !== val) {
				this.isdesc = true;
			} else {
				this.isdesc = !this.isdesc;
			}
			if (this.isdesc) {
				this.sort = 'desc';
				for (var i = 0; i < this.tabList.length; i++) {
					if (i === val - 1) {
						this.tabList[i].sort = 'desc';
					} else {
						this.tabList[i].sort = '';
					}
				}
			} else {
				this.sort = 'asc';
				for (var i = 0; i < this.tabList.length; i++) {
					if (i === val - 1) {
						this.tabList[i].sort = 'asc';
					} else {
						this.tabList[i].sort = '';
					}
				}
			}
			this.num = val;
			this.checked = false;
			this.isCoupon = '';
			this.JDpage = 1;
			switch (val) {
				case 1:
					this.sortName = '';
					break;
				case 2:
					this.sortName = 'inOrderCount30Days';
					break;
				case 3:
					this.sortName = 'price';
					break;
				case 4:
					this.sortName = 'commissionShare';
					break;
			}
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 100
			});
			this.jdGoodsList = [];
			this.dosearch();
		},
		open(index) {
			// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
			// 同时内部会自动给当前展开项进行高亮
			this.$refs.uDropdown.highlight();
		},
		close(index) {
			// 关闭的时候，给当前项加上高亮
			// 当然，您也可以通过监听dropdown-item的@change事件进行处理
			this.$refs.uDropdown.highlight(index);
		},
		change(val) {
			console.log(val);
			if (val === 1) {
				this.owner = 'g';
			} else if (val === 2) {
				this.owner = 'p';
			} else {
				this.owner = '';
			}
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 100
			});
			this.jdGoodsList = [];
			this.dosearch();
		},
		dosearch(val, num) {
			if (this.keyword == '') return false;
			if (val) {
				this.search = val;
			}
			if (num === 1) {
				this.jdGoodsList = [];
			}
			this.$u.api
				.doSearchGoods({
					keyword: this.search,
					sortName: this.sortName !== '' ? this.sortName : '', //排序字段(price：单价, commissionShare：佣金比例, commission：佣金， inOrderCount30Days：30天引单量， inOrderComm30Days：30天支出佣金)
					sort: this.sort, //asc,desc升降序,默认降序
					isCoupon: this.isCoupon !== '' ? this.isCoupon : '', //是否是优惠券商品，1：有优惠券，0：无优惠券
					owner: this.owner, //自营[g]，POP[p]
					pageSize: 20, //每页数量
					pageIndex: this.JDpage,
					fields: 'skuLabelInfo',
					user_id: uni.getStorageSync('jxuser').id
				})
				.then(res => {
					console.log('关键词搜索', res);
					if (res.data.length === 0) {
						this.status = 'nomore';
					}
					this.jdGoodsList.push(...res.data);

					this.saveKeyword(this.search); //保存为历史
				})
				.catch(err => {
					console.log(err);
				});
		},
		getJdGoods() {
			this.$u.api
				.getJdGoods({
					eliteId: 31,
					fields: 'skuLabelInfo',
					user_id: uni.getStorageSync('jxuser').id
				})
				.then(res => {
					console.log('今日必抢', res);
					this.goodsList = res.data;
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.search {
	.title {
		color: #101010;
		font-size: 28rpx;
		font-weight: 600;
	}
	.header {
		background-color: #ffffff;
		margin: 20rpx 0;
		padding: 12rpx 18rpx;
		.step {
			padding: 12rpx 18rpx;
			background-color: rgba(230, 79, 13, 0.26);
			// margin: 20rpx 28rpx;
			border-radius: 6rpx;
			.top {
				font-size: 22rpx;
				color: #84300b;
			}
			.center {
				padding: 0 40rpx;
				margin: 20rpx 0;
				.stepicon {
					width: 40rpx;
					height: 40rpx;
					background-color: #84300b;
					color: #ffffff;
					text-align: center;
				}
			}
			.bot {
				color: #84300b;
				font-size: 24rpx;
				padding: 0 30rpx 0 10rpx;
			}
		}
		.history {
			padding: 0 24rpx;
			margin-top: 20rpx;
			.historyul {
				.historyli {
					padding: 0 20rpx;
					margin-bottom: 20rpx;
					text-align: center;
					background-color: rgba(187, 187, 187, 0.27);
					border-radius: 40rpx;
				}
			}
		}
	}
	.goodsul {
		margin: 0 20rpx;
		.item {
			display: flex;
			padding: 20rpx;
			background-color: #ffffff;
			margin-top: 20rpx;
			.left {
				margin-right: 13rpx;
				image {
					width: 250rpx;
					height: 250rpx;
					border-radius: 12rpx;
				}
			}
			.content {
				// width: 382rpx ;
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
					.cos {
						// width: 56rpx;
						// height: 34rpx;
						color: #ffffff;
						font-weight: 200;
						font-size: 28rpx;
						text-align: center;
						padding: 0 12rpx;
						background-color: #ff0303;
						border-radius: 8rpx;
						margin-right: 6rpx;
					}
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
				}
				.earn {
					margin: 10rpx 0;
					.coupon {
						width: 180rpx;
						height: 40rpx;
						line-height: 40rpx;
						color: #ff0303;
						text-align: center;
						background-color: #ffe5e5;
						border-radius: 50rpx;
						font-size: 24rpx;
					}
				}
				.bot {
					// margin-top: 24rpx;
					.price {
						// width: 226rpx;
						color: #ff0303;
					}
				}
			}
		}
	}
	.screen {
		.headers {
			background-color: #ffffff;
			// padding: 0 24rpx;
		}
		.title {
			font-size: 24rpx;
			color: rgba(16, 16, 16, 0.57);
			margin-right: 10rpx;
		}
		.tabsline {
			height: 72rpx;
			text-align: center;
			.icons {
				width: 40rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				align-items: center;
				.icon {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.tabslines {
			padding: 0 30rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			.screendro {
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
}
</style>
